<template>
    <Teleport to='body'>
        <transition>
            <div v-if='props.modelValue' class='rank-container'>
                <!--            遮罩-->
                <div class='modal' @click='closePublishWorks'></div>
                <div class='rank-box'>
                    <!--头部-->
                    <div class='top-box'>
                        <div class='top-title'>排名查看</div>
                        <div></div>
                        <div class='top-icon' @click='closePublishWorks'>
                            <img src='../../assets/rank/错误.png' alt=''>
                        </div>
                    </div>
                    <!--封面-->
                    <div class='img-box'>
                        <img :src='`/api/${competitionCover}`' alt='competitionCover'>
                    </div>
                    <!--评分排行榜-->
                    <div class='scoreRank-box'>
                        <div v-if="rankType == 'judgement' " class='score-title'>
                            评分排行榜
                        </div>
                        <div v-if="rankType == 'view' " class='score-title'>
                            浏览排行榜
                        </div>
                        <div v-if="rankType == 'collect' " class='score-title'>
                            收藏排行榜
                        </div>
                        <div></div>
                        <div class='type-box'>
                            <el-radio-group v-model='rankType' class='ml-3' @change='onChangeValue'>
                                <el-radio label='judgement' size='small'>按评分</el-radio>
                                <el-radio label='view' size='small'>按浏览</el-radio>
                                <el-radio label='collect' size='small'>按收藏</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                    <!--具体排名-->
                    <div style='flex: 1;overflow: auto'>
                        <div v-for='(item,index) in rankList' :key='item.worksId' class='rank-content-box'>
                            <div class='left-box'>
                                <div class='number-box'>
                                    <div
                                        :class="{'active1':index == 0 ? 'active1': '','active2':index == 1 ? 'active2':'','active3':index == 2 ? 'active3':''}">
                                        {{ index + 1 }}
                                    </div>
                                </div>
                                <div class='avatar-box'>
                                    <img
                                        v-if='item.user.avatar' :src='`/api/${item.user.avatar}`'
                                        alt=''>
                                    <img v-else src='../../assets/rank/rap.jpg' alt=''>
                                    <el-popover
                                        placement='bottom'
                                        effect='dark'
                                        :width='150'
                                        :show-after='200'
                                        transition='el-fade-in-linear'
                                        trigger='hover'
                                        :content='item.user.nickName'
                                    >
                                        <template #reference>
                                            <div class='avatar-title'>
                                                {{ item.user.nickName }}
                                            </div>
                                        </template>
                                    </el-popover>
                                </div>
                            </div>
                            <div class='centre-box'>
                                <el-popover
                                    placement='bottom'
                                    effect='dark'
                                    :width='150'
                                    :show-after='200'
                                    transition='el-fade-in-linear'
                                    trigger='hover'
                                    :content='item.title'
                                >
                                    <template #reference>
                                        <!--                                        <div class='work-name'>-->
                                        {{ item.title }}
                                        <!--                                        </div>-->
                                    </template>
                                </el-popover>
                            </div>
                            <div class='right-box'>
                                <div v-if='rankType==="judgement"' class='score'>
                                    {{ item?.totalScore || 0 }} <span style='font-size: 14px;color:#B8B8B8'>分</span>
                                </div>
                                <div v-else-if='rankType === "view"' class='score'>
                                    {{ handleCount(item?.views || 0) }}<span
                                    style='font-size: 14px;color:#B8B8B8'>浏览</span>
                                </div>
                                <div v-else-if='rankType === "collect"' class='score'>
                                    {{ handleCount(item?.collect || 0) }}<span
                                    style='font-size: 14px;color:#B8B8B8'>收藏</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </transition>
    </Teleport>

</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, computed, watchEffect, watch } from 'vue';
import { getWorkRankApi } from '@/api/business/works';
import { ElMessage } from 'element-plus';
import { handleCount, startPageScroll } from '@/utils/sk';
import { Works } from '@/api/model/Works';
import defaultCoverImg from '@/assets/default/cover/1.jpg';
//接收父组件传过来的数据
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
    modelValue: Boolean,
    competitionId: {
        required: true,
        type: Number,
        default: 0
    },
    competitionCover: {
        type: String,
        default: defaultCoverImg
    }
});

const rankType = ref<string>('judgement');//切换类型
const rankList = ref<Works[]>([]); //排名数据

// 关闭提交作品弹框
function closePublishWorks() {
    emits('update:modelValue', false);
    //开启页面滚动
    startPageScroll();
}

//选择改变的值
const onChangeValue = (e: string) => {
    rankType.value = e;
    getWorkRank();
};
// 获取当前比赛作品排名列表
const getWorkRank = async () => {
    if (props.competitionId === 0) return;
    const params = {
        competitionId: props.competitionId,
        params: {
            type: rankType.value
        }
    };
    const res = await getWorkRankApi(params);
    if (res.code !== 200) return ElMessage.error('获取排名列表失败');
    rankList.value = res.rows;
};


/*每次进来获取比赛作品排名*/
watch(() => props.competitionId, () => {
    getWorkRank();
});
</script>

<style lang='scss' scoped>
.rank-container {

    .modal {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.1);
        z-index: 1;
    }

    .rank-box {
        width: 677px;
        height: 100%;
        background-color: #FFFFFF;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
        border-radius: 6px;
        padding-bottom: 20px;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 2;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;

        .top-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 20px;
            height: fit-content;

            .top-title {
                font-size: 20px;
                font-weight: bold;
                color: #3D3D3D;
            }

            .top-icon {
                cursor: pointer;
                width: 16px;
                height: 16px;
            }
        }

        .img-box {
            width: 100%;
            height: 200px;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .scoreRank-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 11px 20px;
            height: fit-content;

            .score-title {
                font-size: 18px;
                font-weight: bold;
                color: #3D3D3D;
            }
        }

        .rank-content-box {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 29px;

            .left-box {
                display: flex;
                align-items: center;


                .number-box {
                    width: 50px;
                    font-size: 18px;
                    font-weight: 900;
                }

                .avatar-box {
                    display: flex;
                    align-items: center;
                    width: 150px;

                    img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        object-fit: cover;
                    }

                    .avatar-title {
                        cursor: pointer;
                        @include ellipsisOption(1);
                        margin-left: 10px;
                        font-size: 14px;
                        font-weight: 350;
                        color: #3D3D3D;
                    }
                }
            }

            .centre-box {
                width: 300px;
                @include ellipsisOption(1);
                cursor: pointer;
                font-size: 14px;
                font-weight: 700;
            }

            .right-box {

                .score {
                    width: 100px;
                    text-align: right;
                    font-size: 14px;
                    font-weight: 700;

                    span {
                        margin-left: 6px;
                        font-weight: 400;
                    }
                }
            }
        }
    }

    .active1 {
        color: #FFA148;
    }

    .active2 {
        color: #BBB8B5;
    }

    .active3 {
        color: #CD986E;
    }
}
</style>
